draw({
  color: "#abf",
  id: "#svg",
});

//准备数据
data = {
  title: "前端各部分课程时长(h)",
  values: [
    { text: "HTML5", value: 20 },
    { text: "CSS3", value: 60 },
    { text: "JavaScript", value: 80 },
    { text: "Vue", value: 120 },
    { text: "React", value: 90 },
  ],
};

//准备生成随机颜色的方法
function randomColor() {
  return `rgb(${Math.random() * 256},${Math.random() * 256},${
    Math.random() * 256
  })`;
}

//计算弧上的点
function calcPoint(origin, r, deg) {
  return {
    x: origin.x + Math.sin((deg * PI) / 180) * r,
    y: origin.y - Math.cos((deg * PI) / 180) * r,
  };
}

//为不同的数据随机颜色
const colors = [];
data.values.forEach(() => {
  colors.push(randomColor());
});

//计算总数， 后面用来计算角度
const sum = data.values.map((e) => e.value).reduce((e1, e2) => e1 + e2);

//准备绘制
const NS = "http://www.w3.org/2000/svg";
const svg = document.querySelector("#svg");

//绘制标题
const titleText = document.createElementNS(NS, "text");
titleText.classList.add("title");
titleText.setAttribute("x", 10);
titleText.setAttribute("y", 15);
titleText.innerHTML = data.title;
svg.appendChild(titleText);

//绘制图形
const r1 = 80; //基本图形半径
const r2 = 82; //高亮图形半径
const r3 = 85; //提示线半径
const PI = Math.PI;
const origin = { x: 125, y: 125 };
let lastDeg = 0;
let startPoint = { x: 125, y: 45 };
data.values.forEach((obj, i) => {
  const g = document.createElementNS(NS, "g");
  g.classList.add("graphic");
  svg.appendChild(g);

  //计算角度
  const dataDeg = (obj.value / sum) * 360;
  console.log(dataDeg);

  //判断锐角钝角（大弧，小弧）
  //根据角度计算弧上另一个的坐标
  const flag = dataDeg <= 180 ? 0 : 1;
  const endPoint = {
    x: origin.x + Math.sin(((dataDeg + lastDeg) * PI) / 180) * r1,
    y: origin.y - Math.cos(((dataDeg + lastDeg) * PI) / 180) * r1,
  };
  //绘制弧
  const path = document.createElementNS(NS, "path");
  path.setAttribute("fill", colors[i]);
  path.setAttribute(
    "d",
    `M${origin.x} ${origin.y}L${startPoint.x} ${startPoint.y}A${r1} ${r1} 0 ${flag} 1 ${endPoint.x} ${endPoint.y} Z`
  );
  g.appendChild(path);

  //按照r3半径， 一半角度，计算直线位置
  const linePoint = calcPoint(origin, r3, dataDeg / 2 + lastDeg);
  const line = document.createElementNS(NS, "polyline");
  line.setAttribute(
    "points",
    `${origin.x} ${origin.y},${linePoint.x} ${linePoint.y},${
      linePoint.x > origin.x ? linePoint.x + 5 : linePoint.x - 5
    } ${linePoint.y}`
  );
  line.setAttribute("stroke", colors[i]);
  g.appendChild(line);

  //绘制text
  const text = document.createElementNS(NS, "text");
  text.innerHTML = obj.text;
  text.setAttribute("y", linePoint.y + 3);
  if (linePoint.x > origin.x) {
    text.setAttribute("x", linePoint.x + 10);
  } else {
    text.setAttribute("x", linePoint.x - 10);
    text.classList.add("end");
  }
  g.appendChild(text);
  //给这个g记录信息，准备后面高亮
  g.setAttribute("lastDeg", lastDeg);
  g.setAttribute("dataDeg", dataDeg);
  g.setAttribute("color", colors[i]);
  g.setAttribute("i", i);

  lastDeg += dataDeg;
  startPoint = endPoint;
});

//鼠标移入，弧形高亮变大
const point = { x: 125, y: 125 - 82 };
svg.onmouseover = function (e) {
  if (
    e.target.parentNode.tagName == "g" &&
    e.target.parentNode.getAttribute("class") == "graphic"
  ) {
    let deg1 = e.target.parentNode.getAttribute("lastDeg");
    let deg2 = e.target.parentNode.getAttribute("dataDeg");
    deg1 = +deg1;
    deg2 = +deg2;
    let p1 = calcPoint(origin, r2, deg1);
    let p2 = calcPoint(origin, r2, deg1 + deg2);
    const path = e.target.parentNode.querySelector("path");
    const flag = deg2 >= 180 ? 1 : 0;
    path.setAttribute(
      "d",
      `M${origin.x} ${origin.y}L${p1.x} ${p1.y}A${r2} ${r2} 0 ${flag} 1 ${p2.x} ${p2.y} Z`
    );
    const i = e.target.parentNode.getAttribute("i");
    const panel = document.querySelector("#data-panel");

    function t(e) {
      const left = e.clientX;
      const top = e.clientY;
      panel.style.display = "block";
      panel.style.left = left + 5 + "px";
      panel.style.top = top + 10 + "px";
      panel.innerHTML = data.values[i].text + ":" + data.values[i].value;
    }
    t(e);

    e.target.parentNode.onmousemove = function (e) {
      t(e);
    };

    e.target.parentNode.onmouseout = function () {
      let deg1 = +e.target.parentNode.getAttribute("lastDeg");
      let deg2 = +e.target.parentNode.getAttribute("dataDeg");
      let p1 = calcPoint(origin, r1, deg1);
      let p2 = calcPoint(origin, r1, deg1 + deg2);
      const panel = document.querySelector("#data-panel");
      const path = e.target.parentNode.querySelector("path");
      const flag = deg2 >= 180 ? 1 : 0;
      path.setAttribute(
        "d",
        `M${origin.x} ${origin.y}L${p1.x} ${p1.y}A${r2} ${r2} 0 ${flag} 1 ${p2.x} ${p2.y} Z`
      );
      panel.style.display = "none";
      this.onmouseout = null;
      this.onmousemove = null;
    };
  }
};
